<!DOCTYPE html>
<html>
<head>
	<title>功夫熊猫</title>
	<meta charset="UTF-8">
	<style>
		/*功夫熊猫动画实现  CSS*/
		*{
		padding: 0;
		margin: 0;   
		/*去掉元素默认存在内外边距*/	
		}
		/*1.背景图片*/
		body{
			background: url(img/bg.jpg) no-repeat;
			background-size: 100% 641px;
		}
		/*2.标题添加字体效果*/
		h1{
			font-family: "华文彩云";
			font-size: 100px;
		}
		/*3.熊  实现图片页面移动并且改变：背景图片*/
		#bear{
			width: 251px;
			height: 251px;
			bor der: 1px solid red;
			background: url(img/bear_1.png);
			background-size: 100% 100%; 
			animation: bear 12s linear infinite;
			position: relative;
			left: -34px;
            top: -21px;
		}
		/*4.动画：关键帧*/
		@keyframes bear{
			10%{
				position: relative;
				left: -34px;
                top: -21px;
			}
			20%{
				transform: rotate(0deg);
				background: url(img/bear_2.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			30%{
				transform: rotate(360deg);
				background: url(img/bear_3.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			40%{
				background: url(img/bear_4.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			50%{
				background: url(img/bear_5.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			60%{
				background: url(img/bear_6.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			70%{
				background: url(img/bear_7.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			80%{
				background: url(img/bear_8.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			90%{
				background: url(img/bear_9.png);
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
			100%{
				background: url(img/bear_10.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
				left: 200px;
				top: 100px;
			}
		}
	</style>
</head>
<body>
<!-- 思路：1.页面元素 行为属性-->
<marquee behavior="alternate"><h1>功夫熊猫</h1></marquee>
<!-- 2.页面元素  bear熊-->
<div id="bear"></div>
<!-- 3.页面元素  云 -->
<marquee><img src="img/cloud.png"></marquee>
</body>
</html>